Parent | Child | Previous | Next
 

Image Gallery Properties

Description

A list of image gallery properties with their descriptions.

Image Gallery Options Properties

  • Default image directory

    This value is normally bound by an argument to a field in an Alpha Anywhere data driven component. The default value is typically used for testing.

  • Image directory sort criteria

    Specifies the sort order for the image directory. Choices include.

  • Default filter

    Should you need to filter the images returned from the wildcard search of the images directory, a filter string may be applied. This can also be bound by an argument to a field in an Alpha Anywhere data driven component or to a JavaScript function.

  • Limit the number of images displayed

    Limits the number of images displayed.

  • * Maximum images to display

    Image count threshold. This limits the number of thumbnails/images displayed in the gallery. Example, if set to 32 and the directory contains 100 images, only the first 32 will be displayed. Minimum value is 2.

  • Background color

    Select a light or dark background for the image gallery. Choices include.

  • Display slideshow button

    Show the slideshow control. Allows the user to turn on a slideshow.

  • Slideshow delay

    Set the time delay in milliseconds between slide transitions, default is 5000. Minimum is 3000. Maximum is 15000.

  • Display image filename

    Display the image filename, within the image footer, center justified.

  • Display formatted EXIF information

    Show the EXIF data (if available) contained in the jpg file. The EXIF data will follow the image description, if displayed.

    You must have ImageMagick installed on your server in order to show EXIF data. The ImageMagick 'identify.exe' program is used to extract EXIF data. This program must be in the path. To get ImageMagick go to http://www.imagemagick.org/

  • Display Google Map and image marker

    Show a Google Map, on the flip side of the Info Panel, if the photo has lat/lon data.

  • Google Maps API key

    Specify your Google Maps API Key. You need to go to the Google Maps site to request your API key. The key you define here will override the project global API key that you can define in the Web Project Properties dialog.

    If you wish to use the key defined in Project Properties, leave this value blank.

  • Display Text to speech button for supported browsers

    Display a Play button that converts the Info Panel text to speech. Uses .NET TTS library and HTML5 audio. Only displays in supported webkit browsers.

  • Display image description in Info Panel

    Show the description within the info panel, if available. The description field requires binding to a database table. The directory name and the image name are the primary keys. The field data may contain HTML markup.

Data Binding - Images table -> image description Properties

Data Binding is used to provide descriptions for images. If an image folder + image name is found in the table along with a description, the description will appear in the Info panel.

Other Component Properties Properties

  • Style name

    Click the button to select a new style, or edit the existing style. You can also use <ProjectStyle> or <Session:varname>

  • Class map

    Specify how the abstract CSS class names used in this component map to physical CSS class names in your style sheets.

  • Resolve abstract CSS class names

    Replace abstract CSS class names with physical CSS class names. This should only be un-checked if you are in development mode and you want to determine what the abstract CSS class name is for a particular element in the component.

  • Font size

    Specify if the fonts in the Component should be scaled to make the component larger or smaller. Select 'Medium' for no scaling (i.e. the fonts shown will match those defined in the style sheet). Choices include.

  • Font scaling option

    Specify which CSS classes should be scaled. If you choose All, the fonts in these classes will be scaled, in addition to the fonts in the CSS classes specific to the Style that you selected: BODY, TABLE, TH, TR, TD, UL, OL, LI, P, A, BLOCKQUOTE. Choices include All, GridStyleClassesOnly.

  • Master template

    Specify an optional Master Template. This allows you to place arbitrary HTML surrounding the component.

  • Page title

    Specify the page title for the .a5w page that renders this component.

CSS/SVG Properties

  • Local CSS definitions

    Define any local CSS classes. NOTE: You can include SASS syntax in your CSS definition. For more information on SASS syntax see http://sass-lang.com/

  • Additional component styles

    Specify if any other styles (in addition to the primary style for the component) must be included. Enter a comma delimited list of style names. e.g., GlassOlive,Airport

  • CSS Linked files

    Specify any CSS files that should be linked (in addition to the primary style for the Component). Enter a comma delimited list of filenames.

  • Local SVG definitions

    Specify any local SVG image definitions you want to include in this component.

  • SVG Linked files

    Specify any SVG files that should be linked. Enter a comma delimited list of filenames. Only relative filenames can be specified. Files must be in a folder relative to the webroot.

Arguments Properties

  • Arguments

    Define arguments. Arguments can be bound to page, session and cookie variables. Argument values are passed into all server-side Xbasic event handlers in the component. The following arguments are available for defining the images shown in an Image Gallery component:

    image_dir

    The image directory to display

    filter

    A comma delimited file filter string, which supports the * and ? wildcard characters.

  • The filter argument can be defined to filter the files shown in the Image Gallery. For example:

    img_house.jpg,img_bathroom_*.jpg,img_kitchen_*.jpg1

  • This filter will select all of the .jpg files that start with 'img_bathroom_' or 'img_kitchen_' as well as the image called 'img_house.jpg'.

    The default value for the filter is blank. If a blank filter is supplied, then all of the images in the specified folder are shown.

    When you use Action Javascript to open an Image Gallery, you will be able to specify a value for the Filter argument.

    The ability to specify a filter argument, combined with the ability to bind the filter at runtime to the result of an arbitrary JavaScript function, is extremely powerful, and gives you great flexibility in controlling exactly which images are shown in the Image Gallery.

Javascript Properties

  • Javascript Linked files

    Specify any Javascript files that should be linked. Enter a comma delimited list of filenames.

Xbasic Properties

  • Xbasic Linked files

    Specify any Xbasic Function Library files that should be linked. Enter a comma delimited list of filenames. Defining Xbasic functions in a Function Library (that can be shared among multiple components) is an alternative to defining your Xbasic functions in this component (see 'Xbasic functions' on the toolbox).

Other Properties

  • Language definitions

    Define strings for different languages.

  • Text dictionary tags

    Show Text Dictionary tags (<a5:t>...</a5:t7gt;) used in this component.

  • Active language

    Specify the active language to use for translating strings tagged with <a5:r>..</a5:r> tags. Setting the property here is useful for testing purposes. In a real application you can set the 'session.__protected__activeLanguage' variable to specify the active language. To select the default language, enter <Default> or leave this property blank.

  • Remove un-consumed language tags

    Should any language tags that were not replaced (because they were not defined in the Language Definition) be removed from any output sent to the browser?

  • Head section tags

    Specify any tags you want to appear in the HEAD section of the page that hosts this component.

  • Component must run in IFrame

    Specify if this component must run in its own IFrame.

  • IFrame inline style

    Specify the in-line style for the IFrame. You should set a height and width for the IFrame. e.g. width: 6in; height 4in;

Advanced Properties

  • Other properties

    Specify other properties of the component

  • Save component format

    Specify if the Image Gallery component should be saved as a binary file or as formatted JSON.

    Formatted JSON saves the properties in clear text. This is useful if you are using some type of source or version control system and the system has a method to show differences between versions. Choices include Binary, Formatted JSON.